<template>
  <div>
    <header-component />

    <div id="BackLink">
      <router-link to="/catalog/index">Return to Main Menu</router-link>
    </div>

    <div id="Catalog" v-if="order">
      <table>
        <tr>
          <th align="center" colspan="2">
            Order #{{ order.orderId }}
            <span v-if="order.orderDate">({{ formatDate(order.orderDate) }})</span>
          </th>
        </tr>

        <!-- Payment Info -->
        <tr><th colspan="2">Payment Details</th></tr>
        <tr><td>Card Type:</td><td>{{ order.cardType || '-' }}</td></tr>
        <tr><td>Card Number:</td><td>{{ order.creditCard || '-' }} * Fake number!</td></tr>
        <tr><td>Expiry Date:</td><td>{{ order.expiryDate || '-' }}</td></tr>

        <!-- Billing Info -->
        <tr><th colspan="2">Billing Address</th></tr>
        <tr><td>First name:</td><td>{{ order.billToFirstName }}</td></tr>
        <tr><td>Last name:</td><td>{{ order.billToLastName }}</td></tr>
        <tr><td>Address 1:</td><td>{{ order.billAddress1 }}</td></tr>
        <tr><td>Address 2:</td><td>{{ order.billAddress2 }}</td></tr>
        <tr><td>City:</td><td>{{ order.billCity }}</td></tr>
        <tr><td>State:</td><td>{{ order.billState }}</td></tr>
        <tr><td>Zip:</td><td>{{ order.billZip }}</td></tr>
        <tr><td>Country:</td><td>{{ order.billCountry }}</td></tr>

        <!-- Shipping Info -->
        <tr><th colspan="2">Shipping Address</th></tr>
        <tr><td>First name:</td><td>{{ order.shipToFirstName }}</td></tr>
        <tr><td>Last name:</td><td>{{ order.shipToLastName }}</td></tr>
        <tr><td>Address 1:</td><td>{{ order.shipAddress1 }}</td></tr>
        <tr><td>Address 2:</td><td>{{ order.shipAddress2 }}</td></tr>
        <tr><td>City:</td><td>{{ order.shipCity }}</td></tr>
        <tr><td>State:</td><td>{{ order.shipState }}</td></tr>
        <tr><td>Zip:</td><td>{{ order.shipZip }}</td></tr>
        <tr><td>Country:</td><td>{{ order.shipCountry }}</td></tr>
        <tr><td>Courier:</td><td>{{ order.courier }}</td></tr>
        <tr><td colspan="2">Status: {{ order.orderStatus?.status || '-' }}</td></tr>

        <!-- Items -->
        <tr>
          <td colspan="2">
            <table>
              <tr>
                <th>Item ID</th>
                <th>Quantity</th>
                <th>Price</th>
                <th>Total</th>
              </tr>

              <tr v-for="(lineItem, index) in lineItems" :key="index">
                <td>
                  <router-link
                    :to="{ path: '/itemForm', query: { event: 'viewItem', itemId: lineItem.itemId } }"
                  >
                    {{ lineItem.itemId }}
                  </router-link>
                </td>
                <td>{{ lineItem.quantity }}</td>
                <td>{{ formatCurrency(lineItem.unitPrice) }}</td>
                <td>{{ formatCurrency(lineItem.quantity * lineItem.unitPrice) }}</td>
              </tr>

              <tr>
                <th colspan="4">Total: {{ formatCurrency(order.totalPrice) }}</th>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>

    <div v-else>
      <p>Loading order details...</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import HeaderComponent from '@/components/Header.vue'
import { getOrderDetail } from '@/api/order'

const route = useRoute()
const order = ref(null)
const lineItems = ref([])

const formatDate = (dateStr) => {
  const date = new Date(dateStr)
  return date.toLocaleString()
}

const formatCurrency = (num) => {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
  }).format(num || 0)
}

onMounted(async () => {
  const orderId = route.params.orderId || route.query.orderId || '1082'
  try {
    const res = await getOrderDetail(orderId)
    console.log('完整响应:',res.data);  //测试前端得到的data
    if (res.status === 0) {
      order.value = res.data.order
      lineItems.value = res.data.lineItems || []
    } else {
      console.log('Order ID:', orderId)
      alert(res.message || 'Order not found')
    }
  } catch (e) {
    alert('Failed to fetch order detail')
    console.error(e)
  }
})
</script>
